/**
 * MonsterGroupCanvasElement 代表怪兽集合
 * @param {Object} options 怪兽集合的参数
 * @param {number} options.monsterSize 怪兽的尺寸
 * @param {number} options.rows 怪兽的行数
 * @param {number} options.cols 怪兽的列数
 * @param {number} options.rowSpan 怪兽的行间隔
 * @param {number} options.colSpan 怪兽的列间隔
 * @param {string} options.monsterImgUrl 怪兽的图片url
 * @param {string} options.monsterImgDeadUrl 怪兽死亡的图片url
 * @param {string} [options.startDirection=right] 怪兽最开始向那边移动,只能为right或者left
 */
function MonsterGroupCanvasElement(options) {
  options = Object.assign({}, {
    vx: 2,
    vy: 40,
    monsterSize: 50,
    rows: 3,
    cols: 7,
    rowSpan: 10,
    colSpan: 10,
    monsterImgUrl: '',
    monsterImgDeadUrl: '',
    startDirection: 'right'
  }, options);
  BaseCanvasElement.call(this, options);
  this.monsterSize = options.monsterSize;
  this.rows = options.rows;
  this.cols = options.cols;
  this.rowSpan = options.rowSpan;
  this.colSpan = options.colSpan;
  this.monsterImgUrl = options.monsterImgUrl;
  this.monsterImgDeadUrl = options.monsterImgDeadUrl;
  this.startDirection = options.startDirection;
  // 怪兽组
  this.monsters = [];
  this.monstersDirection = this.startDirection;
  this.init();
}

inheritPrototype(MonsterGroupCanvasElement, BaseCanvasElement);

/**
 * init方法
 */
MonsterGroupCanvasElement.prototype.init = function () {
  var self = this;
  // 设置初始的怪兽
  for (var row = 0; row < this.rows; row++) {
    for (var col = 0; col < this.cols; col++) {
      self.monsters.push(new MonsterCanvasElement({
        // 这里对x的操作耦合性太高
        x: this.startDirection === 'right' ? 60 + col * (this.monsterSize + self.colSpan) : 230 + col * (this.monsterSize + self.colSpan),
        y: 30 + row * (this.monsterSize + self.rowSpan),
        vx: self.vx,
        vy: self.vy,
        width: this.monsterSize,
        height: this.monsterSize,
        imgSrc: self.monsterImgUrl,
        imgDeadSrc: self.monsterImgDeadUrl
      }));
    }
  }
  this.x = 30;
  this.y = 30;
  this.width = 30 + (this.cols - 1) * (50 + this.colSpan);
  this.height = 30 + (this.rows - 1) * (50 + this.rowSpan)
  // 更新size
  this.changeSize();
}

/**
 * render方法 将所有怪兽绘制到指定的context上,绘制结果应该只和实例的属性有关
 * @param {object} context 画布的 context 对象
 */
MonsterGroupCanvasElement.prototype.render = function (context) {
  var self = this;
  // 绘制怪兽
  this.monsters = this.monsters.filter(function (monster) {
    // 先画了再说(没有充足理由先更新数据,虽然效果似乎差不多)
    monster.draw(context);
    // 下面都是更新数据
    // 根据情况移动怪兽
    monster.move(self.monstersDirection);
    // 是否应该从self.monsters把怪兽移除
    if (monster.shouldRemove) {
      // 从self.monsters移除
      return false;
    } else {
      return true;
    }
  });
  // 更新group的size
  this.changeSize();
}

/**
 * changeSize方法 会根据当前怪兽的位置情况更新this.x, this.y, this.width, this.height等属性
 */
MonsterGroupCanvasElement.prototype.changeSize = function () {
  var minX = Infinity;
  var maxX = -Infinity;
  var minY = Infinity;
  var maxY = -Infinity;
  this.monsters.forEach(function (monster) {
    // self.x = monster.x < self.x ? monster.x : self.x;
    // self.y = monster.y > self.y ? monster.y : self.y
    // self.width = monster.x + monster.width > self.width ? monster.x + monster.width : self.width;
    // self.height = monster.y + monster.height > self.height ? monster.y + monster.height : self.height;
    minX = monster.x < minX ? monster.x : minX;
    maxX = monster.x + monster.width > maxX ? monster.x + monster.width : maxX;
    minY = monster.y < minY ? monster.y : minY;
    maxY = monster.y + monster.height > maxY ? monster.y + monster.height : maxY;
  });
  this.x = minX;
  this.y = minY;
  this.width = maxX - minX;
  this.height = maxY - minY;
}